<template>
	<view>


		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product " v-for="(goods,index) in goodsList" :key="goods.id"  >

					<view class="center">
						<view class="name">{{goods.name}} </view>
						<view class="name">{{goods.order_no}}</view>
					</view>
					<view class="right" v-if="goods.status=='未核销'" @tap="toMyQRZQ(index)">

						<!-- <image mode="widthFix" :src="goods.img"></image> -->
						<!-- <view class="price">{{goods.price}}</view> -->
						<view  class="receive">查看二维码</view>
						
					</view>
					<view class="right" v-if="goods.status=='已核销'" >
						<view v-if="goods.status=='已核销'" class="receive">已核销</view>
					</view>
				</view>

			</view>
			<!-- <view class="loading-text">{{loadingText}}</view> -->
		</view>
		<view class="place"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				loadingText: "正在加载...",
				headerTop: "0px",
				headerPosition: "fixed",
				orderbyList: [{
						text: "销量",
						selected: true,
						orderbyicon: false,
						orderby: 0
					},
					{
						text: "价格",
						selected: false,
						orderbyicon: ['sheng', 'jiang'],
						orderby: 0
					},
					{
						text: "好评",
						selected: false,
						orderbyicon: false,
						orderby: 0
					}
				],
				orderby: "sheng",
				oid:0
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.cid); //打印出上个页面传递的参数。
			uni.setNavigationBarTitle({
				title: option.name
			});

			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			this.$checkLogin(option.path)
			this.getdata(option.id)
			this.oid=option.id
		},
		onShow(){
			this.getdata(this.oid)
		},
		create() {
			this.$checkLogin('pages/login/login')
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(() => {
				// this.reload();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			// uni.showToast({title: '触发上拉加载'});
			// let len = this.goodsList.length;
			// if(len>=40){
			// 	this.loadingText="到底了";
			// 	return false;
			// }else{
			// 	this.loadingText="正在加载...";
			// }
			// let end_goods_id = this.goodsList[len-1].goods_id;
			// for(let i=1;i<=10;i++){
			// 	let goods_id = end_goods_id+i;
			// 	let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '万达专享券', price: '168', info:'满10000减50元' };
			// 	this.goodsList.push(p);
			// }
		},
		methods: {
			reload() {
				console.log("reload");
				let tmpArr = []
				this.goodsList = [];
				let end_goods_id = 0;
				for (let i = 1; i <= 10; i++) {
					let goods_id = end_goods_id + i;
					let p = {
						goods_id: goods_id,
						img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
						name: '万达专享券',
						price: '168',
						info: '满10000减50元'
					};
					this.goodsList.push(p);
				}
			},
			//商品跳转
			toMyQRZQ(index) {
				
				uni.navigateTo({
					url: '../myQR/myQR?id=' +this.oid + '&type=zq&index='+index
				});
			},
			getdata(oid) {
				let token = uni.getStorageSync("token_h5")
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: "https://bg.jswbgz.com/post/copoun_order:get_zq_copoun_code", //仅为示例，并非真实接口地址。
					data: {
						order_id: oid,
						token: token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					method: 'post',
					success: (res) => {
						uni.hideLoading()
						let List = [];
						console.log(res.data.data)
						if (res.data.data.length > 0) {
							console.log(res)
							res.data.data.forEach((item, index) => {
								List.push(item)
								//console.log(this.swiperList)
							})
							this.$nextTick(() => {
								this.goodsList = List;
							})

						}
					},
					fail: (res) => {
						this.descriptionStr = "没有数据";
						uni.showToast({
							title: "数据加载失败",
							icon: "none"
						});
						console.log(res)
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.icon {
		font-size: 26upx;
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 79upx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: solid 1upx #eee;

		.target {
			width: 20%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			margin-bottom: -2upx;
			color: #aaa;

			&.on {
				color: #555;
				border-bottom: 4upx solid #f06c7a;
				font-weight: 600;
				font-size: 30upx;
			}


		}
	}

	.place {

		background-color: #ffffff;
		height: 100upx;

	}

	.goods-list {
		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 92%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 60upx 0;

			.product {
				width: 100%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 80upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
				min-height: 180upx !important;
				background-color: #F7F7F7;

				image {
					width: 100%;
					border-radius: 20upx;
				}

				.left {
					width: 25%;
					display: block;
					float: left;
					padding: 24upx 0px;
					border-radius: 0px 10px 10px 0px;
					position: relative;

					image {
						width: 100%;
						max-height: 136upx;
					}
				}

				.center {
					width: 45%;
					display: block;
					float: left;
					padding-left: 20upx;
					padding-top: 10px;
				}

				.right {
					width: 35%;
					height: 100%;
					display: block;
					float: right;
					background-color: #EBCC2F;
					border-radius: 0px 10px 10px 0px;
					position: relative;
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
					color: #3D3D3D;

				}

				.price {
					font-family: SourceHanSansCN-Heavy;
					font-size: 24px;
					font-weight: 900;
					letter-spacing: 0em;
					color: #FFFFFF;
					position: absolute;
					top: 35upx;
					width: 100%;
					text-align: center;
				}

				.receive {
					position: absolute;
					left: 18%;
					bottom: 60upx;
					border-radius: 10px;
					background: rgba(216, 216, 216, 0);
					box-sizing: border-box;
					border: 1px solid #F9F9F9;
					width: 65%;
					height: 22px;
					text-align: center;
					color: #fff;
					font-size: 14px;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10upx 4% 10upx 4%;
					color: #3D3D3D;
				}
			}

		}
	}
</style>
